<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.9.1.min.js"></script>
        <link href="<?php echo base_url(); ?>bootstrap/css/bootstrap.css" rel="stylesheet">
		<link href="<?php echo base_url(); ?>css/estilos.css" rel="stylesheet">
        <script type="text/javascript" src="<?php echo base_url(); ?>bootstrap/js/bootstrap.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Della+Respira' rel='stylesheet' type='text/css'>
	<title>EasyCook</title>

        
                <style>
          body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
          }
        </style>
        
            <link href="<?php echo base_url(); ?>bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>

    <div class="container">
<!--div id="container"-->
	
	<div class="Banner">
            <a href="<?=site_url('users_Controller/loadInit')?>" target="_blank"> 
		<img class="logo" src="<?php echo base_url(); ?>images/logo.png" alt="" height="150" width="150">

            </a>
		<h3 class="logoTitle">EasyCook</h3>
	</div>	
	<br>
	<div id="mainBody">
            
            	            <?php
                            $parameters = "new+balance+shoes";
$response = file_get_contents('http://api.backcountry.com/public/search?q='.$parameters.'&pagesize=100&sort=a&recurse=1');
                          //  echo $response;            ?>
            
            <script>
                function fillProduct(excercise){
                    if(excercise === 'run'){
                        
                        //We must bring all the list of running product
                       var obtainedJSON = <?php echo json_encode($response); ?>;
                        // var obj = jQuery.parseJSON('{"name":"John"}');
                       // alert( obj.name === "John" );
                       // alert(obtainedJSON);
                       var obj = jQuery.parseJSON(obtainedJSON);
                       var prod = obj.products;
                       
                       var div = document.getElementById("response");
                      // div.innerHTML = prod[0].id;
                      var table = document.getElementById("productsTable");
                      var displayName;
                      var imageURL; 
                      var id;
                       $('#response').append(displayName);
                       $('#response').append(imageURL);
                       for(var i = 0; i < 100; i++){
                           displayName = prod[i].displayName;
                           imageURL = prod[i].imageLarge.url;
                           id = prod[i].id;
                           var row = table.insertRow(-1);
                           var cell1=row.insertCell(0);
                           var cell2=row.insertCell(1);
                     
                            cell1.innerHTML = "<a href='http://www.backcountry.com/Store/catalog/product.jsp?productId="+id+"' class='img_busqueda'> <!-- TODO: Setear imagen del artista/album --><img src='"+imageURL+"' alt width='50'> </a>";										
                            cell2.innerHTML =  "</p><a href='http://www.backcountry.com/Store/catalog/product.jsp?productId="+id+"' class='gray no_underline'><p class='nombre_artista'><b>"+displayName+"</b></a></p>" ;
                                
                           
                           
                        }
                    }
                    
                }
            
            
            </script>
            
             <div class="contenedor_panel_busqueda">	
							
						<div class="panel">
							<div class="panel_header">
								<h2>
									<span>
									<?php
										echo "Suggested products";
									
									 ?>
									</span>
								</h2>
							</div> <!-- fin div panel_header -->
							<div class="body_panel">

									<div class="contenedor_tabla_resultados_busq">
				
										<table class="table tabla_resultados_busq" id="productsTable">

										</table>
									</div>	<!-- Fin div contenedor_tabla_resultados_busq	-->		 									 							
					
								<div class="body_panel_footer">
									
								</div>
							</div> <!-- Fin div body panel -->
						
							<div class="panel_footer">
								<span></span>
							</div>						
						</div> <!--fin div panel  -->
					</div> <!-- fin div contenedor_panel_busqueda -->
          
            <button class="btn btn-large btn-primary"style="text-align: center;" onclick="fillProduct('run');"/>View Products</button>
        <br>
        
          <div id="response">
                
                
            </div>

	</div>

	<p class="footer">Freelancers, Hackaton 2013, San Jose Costa Rica</p>
</div>

</body>
</html>
